<template>
	<div class="container">
		<div class="top">
			<div class="userInfo">
				<img :src="centerStore.avatar" class="usetInfoImg" />
				<div class="account">
					<span>{{ centerStore.nickName }}</span>
					<p>您还不是会员</p>
				</div>
			</div>
			<div class="text">开通会员平均每年可省：￥9500</div>
			<div class="member">
				<div
					class="left"
					:class="{ active: item.data.recom }"
					v-for="item in centerStore.members"
					:key="item.id"
					@click="changeRecom(item.sortNum)"
				>
					<span>{{ item.data.title }}</span>
					<span
						>￥<i class="bigSize">{{ item.data.price }}</i
						>/{{ item.sortNum == 0 ? '季' : '年' }}</span
					>
					<span
						>合计￥{{ item.data.total_price
						}}{{ item.sortNum == 0 ? '(青少年专属)' : ''
						}}{{
							item.sortNum == 2 ? `(省￥${item.data.saving})` : ''
						}}</span
					>
					<p v-if="item.sortNum == 2">推荐</p>
				</div>
			</div>
			<div>
				<button class="btn">
					立即以{{ centerStore.totalPrice }}元开通
				</button>
			</div>
			<div class="agreement">
				开通即视为同意<a href="#">《会员服务协议》</a>
			</div>
		</div>
		<div class="bottom">
			<p>会员专属权益</p>
			<ul>
				<el-popover
					height="160px"
					width="250px"
					placement="top"
					popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
				>
					<template #reference>
						<li>
							<img
								src="https://rs.dance365.com/teach_video_free.png"
								alt=""
							/>
							<span>723个会员专区课程免费学习</span>
						</li>
					</template>
					<template #default>
						<div
							class="demo-rich-conent"
							style="
								display: flex;
								gap: 16px;
								flex-direction: column;
							"
						>
							<img
								class="popoImg"
								src="https://rs.dance365.com/teach_video_free.png"
								alt=""
							/>
							<p>
								会员专区的723个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
							</p>
							<button class="popobtn">立即前往会员专区</button>
						</div>
					</template>
				</el-popover>
				<li v-for="item in 9" key="index">
					<img
						src="https://rs.dance365.com/teach_video_free.png"
						alt=""
					/>
					<span>723个会员专区课程免费学习</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserInfoStore } from '../../store/userInfo'
let centerStore = useUserInfoStore()
onMounted(() => {
	centerStore.getMembers()
})
let changeRecom = (id) => {
	centerStore.members.map((item) => {
		item.data.recom = false
		if (item.sortNum === id) {
			item.data.recom = true
			centerStore.totalPrice = item.data.total_price
		}
	})
}
</script>

<style scoped>
.container {
	width: 960px;
	height: 840px;
	background-color: #fff !important;
	padding: 30px;
}

.top {
	height: 465px;
	border-bottom: 1px solid #eee;
}

.userInfo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.usetInfoImg {
	width: 100px;
	border-radius: 50%;
}

.account {
	margin-left: 21px;
}

.account p {
	color: #f93684;
}

.text {
	margin-top: 20px;
	text-align: center;
}

/* 会员 */
.member {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.left {
	margin-left: 30px;
}

.member div {
	width: 218px;
	height: 125px;
	border: 1px solid #b4b8c4;
	border-radius: 5px;
	position: relative;
}

.member div span {
	display: block;
	text-align: center;
	height: 20px;
	line-height: 20px;
	margin: 10px 0;
}

.member div span:nth-child(2) {
	height: 35px;
}

.member div p {
	width: 76px;
	height: 36px;
	padding: 3px 2px;
	text-align: center;
	line-height: 36px;
	border: 1px solid #fff;
	background-color: #ff4e86;
	border-radius: 40px;
	position: absolute;
	top: -30px;
	right: -20px;
	color: #fff !important;
}

.active {
	border: 1px solid #f93684 !important;
	background-color: #f9ebf1 !important;
	color: #f93684;
}

.middle {
	margin: 0 30px;
}

.bigSize {
	font-size: 30px;
	font-style: normal;
}

.btn {
	width: 330px;
	height: 56px;
	font-size: 16px;
	color: #fff;
	border: 1px solid #e6c4d5;
	background-color: #ff4e86;
	border-radius: 10px;
	margin: 0 315px;
	margin-top: 30px;
	margin-bottom: 12px;
}

/* 协议 */
.agreement {
	text-align: center;
}

.agreement a {
	text-decoration: none;
	color: #fa3684;
	margin-left: 10px;
}

.bottom {
	border-bottom: 1px solid #b4b8c4;
}

.bottom p {
	height: 32px;
	margin-top: 32px;
	font-size: 20px;
}

.bottom ul {
	display: flex;
	flex-wrap: wrap;
}

.bottom ul li {
	width: 150px;
	height: 127px;
	border: 1px solid #eee;
	list-style: none;
	border-radius: 4px;
	margin-left: 30px;
	margin-bottom: 30px;
}

.bottom ul li img {
	width: 46px;
	height: 42px;
	display: block;
	margin: 0 auto;
	margin-top: 14px;
}

.bottom ul li span {
	display: block;
	height: 40px;
	text-align: center;
	line-height: 20px;
	margin: 14px 10px;
	font-size: 14px;
}

.popoImg {
	width: 46px;
	height: 42px;
	display: block;
	margin: 0 auto;
}

.popobtn {
	width: 150px;
	height: 40px;
	margin: 0 auto;
}
</style>
